---
title: React Accordion - Flowbite
description: Use the accordion component and its options to expand and collapse the content inside each panel based on state reactivity from React and Tailwind CSS
---

The accordion component from Flowbite React can be used to toggle the visibility of the content of each accordion panel tab by expanding the collapsing the trigger element based on multiple examples and styles.

The reactivity and state is handled by React and the components is built using the Tailwind CSS framework meaning that you can easily customize the styles and colors of the accordion.

To use the accordion component, you need to import the `<Accordion>` component from `flowbite-react`:

```jsx
import { Accordion } from "flowbite-react";
```

## Default accordion

Use this example of the `<Accordion>` component and the `<AccordionPanel>` and `<AccordionTitle>` subcomponents to create an accordion with multiple panels.

<Example name="accordion.root" />

## Collapse all

Use this example to automatically collapse all of the accordion panels by passing the `collapseAll` prop to the `<Accordion>` component.

<Example name="accordion.collapseAll" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="accordion" />

## References

- [Flowbite Accordion](https://flowbite.com/docs/components/accordion/)
